<template>
  <div>
    <h2>预约管理</h2>

    <div class="box">
      <div class="operating">
        <el-button type="success" size="small" @click="addAppointment">+新增</el-button>
      </div>
      <div class="operating">
        <el-input placeholder="查找..." class="search-input" v-model="searchInput">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </div>
    </div>



    <!-- 表格 -->
    <el-table v-if="isShow" :data="currentList" style="width: 100%" row-key="id" :tree-props="{ children: 'department' }">
      <el-table-column prop="date" label="预约日期" min-width="10%">
        <template slot-scope="scope">
            {{ 
                dayjs(scope.row.date)
                .format('YYYY-MM-DD HH: mm: ss') }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" min-width="10%">
      </el-table-column>
      <el-table-column prop="sex" label="性别" min-width="10%">
      </el-table-column>
      <el-table-column prop="age" label="年龄" min-width="10%">
      </el-table-column>
      <el-table-column prop="tel" label="手机号" min-width="10%">
      </el-table-column>
      <el-table-column prop="address" label="地址" min-width="10%">
      </el-table-column>
      <el-table-column prop="status" label="状态" min-width="10%">
        <template slot-scope="scope">
          <el-tag disable-transitions type="success" v-if="scope.row.status == '已处理'">
            已处理
          </el-tag>
          <el-tag disable-transitions type="danger" v-if="scope.row.status == '未处理'">
            未处理
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="Booker" label="预约人" min-width="10%">
      </el-table-column>
      <el-table-column prop="department" label="预约部门" min-width="10%">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" min-width="10%">
        <template slot-scope="scope">
            {{ 
                dayjs(scope.row.createTime)
                .format('YYYY-MM-DD HH: mm: ss') }}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="200">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handle(scope.$index)">
            <i class="el-icon-edit"></i>处理
          </el-button>
          <el-button type="danger" size="mini" @click="Delete(scope.$index)">
            <i class="el-icon-close"></i>删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block">
      <Pagination :total="total" :pageSize="pagesize" @getPagination="getPagination"></Pagination>
    </div>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import dayjs from 'dayjs'
export default {
  name: '',
  components: {
    Pagination
  },
  mixins: [],
  props: {

  },
  data() {
    return {
      currentList: {},
      currentPage: 1,
      searchInput: "",
      pagesize: 10,
      isShow: false,
      total:0
    }
  },
  created() {
    this.render()
  },

  methods: {
    //渲染
    dayjs,
    async render() {
      await this.$api.appointment.findAppointmentList({
        pageSize: this.pagesize,
        pageNum: this.currentPage
      }).then((res) => {
        console.log(res)
        this.total = res.data.data.total
        this.currentList = this.dataRewrite(res.data.data.list)
        
      })
      this.isShow = true
    },


    // 处理按钮
    handle(index) {
      this.$confirm('确定设置为已处理吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.appointment.handleAppointment(
          this.currentList[index].id
        ).then((res) =>{console.log(res)})
        this.$router.push("/patient/paManage")
      }).catch(() => {

      });
    },

    // 删除按钮
    Delete(index) {
      this.$confirm('删除该记录将不能恢复，确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(this.currentList[index].id)
        this.$api.appointment.deleteAppointment(
          this.currentList[index].id
        ).then((res) => {
          console.log("123",res)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
        this.render()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 新增按钮
    addAppointment() {
      this.$router.push("/appointment/addAppointment")
    },

    // 模糊查询
    search() {
      if (this.searchInput === "") {
        this.render()
      } else {
        this.$api.appointment.getAppointmentQuery({
          pageSize:5,
          pageNum:1,
          query:this.searchInput
        }).then((res) => {
          this.total = res.data.data.total
          this.currentList = this.dataRewrite(res.data.data.list)
          console.log(res)
        })
      }
    },

    async getPagination(page){
      this.currentPage = page
      let params={
           pageSize: this.pagesize,
           pageNum: this.currentPage
      }
      console.log(params);
      await this.$api.appointment.findAppointmentList(params).then((res) => {
        this.total = res.data.data.total
        this.currentList = this.dataRewrite(res.data.data.list)
        console.log(res)
      })
    },
    
    //数据处理
    dataRewrite(list){
      return list.map(item => ({
            id: item.id,
            date: item.date,
            name: item.sysPatient.name,
            age: item.sysPatient.age,
            sex: item.sysPatient.sex === 0 ? "男" : "女",
            tel: item.sysPatient.phone,
            address: item.sysPatient.address,
            Booker: item.sysUser.realName,
            department: item.sysUser.department.depName,
            createTime: item.createTime,
            status: item.status === 0 ? "未处理" : "已处理",
            patientId: item.patientId,
            userId: item.userId
          }))
    }

  }
};
</script>
<style lang='less' scoped>
h2 {
  margin: 15px;
}

.box {
  background-color: white;
  margin: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 3px solid #ccc;
  border-radius: 5px;
}

.operating {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 10px;
}

.search-input {
  width: 200px;
  float: right;
}

.reserve-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}</style>